{{define "admin/managerclass.html"}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Wblog - Post</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="/static/libs/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/libs/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/static/libs/Ionicons/css/ionicons.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" href="/static/libs/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/static/libs/AdminLTE/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet" href="/static/font/Souce+Sans.css" type="text/css"/>

    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/bootstrap-notify.css">
    <link rel="stylesheet" href="/static/libs/bootstrap-notify-master/css/styles/alert-blackgloss.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

{{template "admin/navbar.html" .}}
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- Sidebar user panel -->
            <div class="user-panel">
                <div class="pull-left image">
                {{if gt (len .user.AvatarUrl) 0}}
                    <img src="{{.user.AvatarUrl}}" class="img-circle" alt="User Image">
                {{else}}
                    <img src="/static/libs/AdminLTE/img/avastar.jpg" class="img-circle" alt="User Image">
                {{end}}
                </div>
                <div class="pull-left info">
                    <p>{{.user.Email}}</p>
                    <!--<a href="#"><i class="fa fa-circle text-success"></i> Online</a>-->
                </div>
            </div>
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">MAIN NAVIGATION</li>
                <li >
                    <a href="/admin/index">
                        <i class="fa fa-dashboard"></i> <span>总览</span>
                    </a>
                </li>


                <li class="treeview active">
                    <a href="#">
                        <i class="fa fa-th"></i>
                        <span>班级</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu ">
                        <li><a href="/admin/seeclass"><i class="fa fa-circle-o"></i> 查看班级</a></li>
                        <li class="active" ><a href="/admin/managerclass"><i class="fa fa-circle-o"></i> 管理班级</a></li>
                    </ul>
                </li>


                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-laptop"></i>
                        <span>测试</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/getexams"><i class="fa fa-circle-o"></i> 查看小测</a></li>
                        <li><a href="/admin/managerexam"><i class="fa fa-circle-o"></i> 管理小测</a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-folder"></i>
                        <span>公告</span>
                        <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
                    </a>

                    <ul class="treeview-menu">
                        <li><a href="/admin/seenotice"><i class="fa fa-circle-o"></i> 查看公告</a></li>
                        <li><a href="/admin/managernotice"><i class="fa fa-circle-o"></i> 管理公告</a></li>
                    </ul>
                </li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class='notifications top-right'></div>
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <small>班级管理</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/admin/seeclass"><i class="fa fa-dashboard"></i> 班级</a></li>
                <li class="active"><a href="#">班级管理</a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <!--<div class="box-header">
                            <h3 class="box-title">Hover Data Table</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example2" class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>班级名称</th>
                                    <th>班级描述</th>
                                    <th>邀请码</th>
                                    <th>创建时间</th>
                                    <th>更新时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {{range .classes}}
                                <tr>
                                    <td name="{{.ClassID}}">{{.ClassID}}</td>
                                {{/*暂时不做详情页*/}}
                                {{/*<td><a href="/admin/class/{{.ID}}" target="_blank">{{.Title}}</a></td>*/}}
                                    <td>{{.ClassName}}</td>
                                    <td>
                                    {{.ClassDescri}}
                                        {{/*<a href="javascript:void(0);" > {{if .IsPublished}}*/}}
                                            {{/*√{{else}}×{{end}}</a>*/}}
                                    </td>
                                    <td>{{.InviteCode}}</td>
                                    <td>{{dateFormat .CreatedAt "06-01-02 15:04"}}</td>
                                    <td>{{dateFormat .UpdatedAt "06-01-02 15:04"}}</td>
                                    <td>
                                        <a href="#" data-href="/admin/class/update"
                                           class="btn btn-primary" data-id="{{.ClassID}}" data-name="{{.ClassName}}"
                                           data-desc="{{.ClassDescri}}" data-code="{{.InviteCode}}" data-toggle="modal"
                                           data-target="#confirm-edit">修改</a>
                                        <a href="#" class="btn btn-danger" data-id="{{.ClassID}}"
                                           data-href="/admin/class/delete"
                                           data-toggle="modal" data-target="#confirm-delete">删除</a>

                                    </td>
                                </tr>
                                {{end}}
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->

<div class="modal fade" id="confirm-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                修改班级
            </div>
            <div class="modal-body">
                <form id="form_data" role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级名称</label>
                        <div class="col-sm-10">
                            <input name="classname" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级描述</label>
                        <div class="col-sm-10">
                            <textarea name="classdescri" class="form-control" rows="3"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级邀请码</label>
                        <div class="col-sm-4">
                            <input name="invitecode" readonly class="form-control">
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="change btn btn-block btn-info btn-sm">换一个</button>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal">取消</button>
                <a class="btn btn-primary btn-okque">确定</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                请确认
            </div>
            <div class="modal-body">
                <form id="form_data" role="form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">输入账号密码</label>
                        <div class="col-sm-6">
                            <input name="password" class="form-control">
                        </div>
                        <div class="col-sm-2">
                            <button type="button" class="checkuser btn btn-block btn-info btn-sm">验证</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class=" btn btn-default cancel" data-dismiss="modal">取消</button>
                <a class="disabled btn btn-danger btn-ok deleteclass">删除记录</a>
            </div>
        </div>
    </div>
</div>
<!-- jQuery 3 -->
{{/*<script src="/static/libs/jquery/jquery.min.js"></script>*/}}
<!-- Bootstrap 3.3.7 -->
{{template "admin/page_end.html"}}
{{/*<script src="/static/libs/bootstrap/js/bootstrap.min.js"></script>*/}}
<!-- DataTables -->
<script src="/static/libs/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/libs/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- AdminLTE App -->
{{/*<script src="/static/libs/AdminLTE/js/adminlte.min.js"></script>*/}}
<!-- page script -->
<script>
    var cid;
    var cname;
    var cdes;
    var code;
    var issave = false;
    var custom = [
        'bangTidy',
        'blackgloss'
    ];
    $(function () {
        $('#example2').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'info': true,
            'autoWidth': false
        });
    });


    $('#confirm-edit').on('show.bs.modal', function (e) {
        cid = $(e.relatedTarget).data('id');
        var myid =$('td[name=' + cid + ']');
        cname = $.trim(myid.next().text());

        cdes =$.trim(myid.next().next().text());
        code = $.trim(myid.next().next().next().text());
        // $(this).find('.btn-ok').unbind("click");
        // cname = $(e.relatedTarget).data('name');
        // cdes = $(e.relatedTarget).data('desc');
        // console.log(cdes);
        // code = $(e.relatedTarget).data('code');

        $('input[name="invitecode"]').val(code);
        $('input[name="classname"]').val(cname);
        $('textarea[name="classdescri"]').val(cdes);

    });

    $('.change').click(function () {
        var invitecode = $('input[name="invitecode"]');


        $.get("/admin/getcode", {isFirst: true}, function (result) {
            console.log(result);
            if (result.succeed) {
                $('.top-right').notify({
                    message: {text: result.message},
                    type: custom[1]
                }).show();
                invitecode.val(result.invitecode)
            } else {
                $('.top-right').notify({
                    message: {text: result.message},
                    type: custom[1]
                }).show();
            }
        });
    });


    $('.btn-okque').click(function () {
        var classname = $('input[name="classname"]').val();
        var classdescrib = $('textarea[name="classdescri"]').val();
        var invitecode = $('input[name="invitecode"]').val();
        var idstr = cid + "";


        if (!classname) {
            $('.top-right').notify({
                message: {text: '班级名称不能为空！'},

                type: custom[1]
            }).show();
            $('input[name="classname"]').focus();
            return;
        }
        //修改班级信息
        $.post("/admin/class/update", {
            classname: classname,
            classdescri: classdescrib,
            invitecode: invitecode,
            cid: cid
        }, function (result) {
            console.log(result);
            if (result.succeed) {
                $('.top-right').notify({
                    message: {text: '修改成功'},
                    type: custom[1]
                }).show();
                $('td[name=' + idstr + ']').next().text(classname).next().text(classdescrib).next().text(invitecode);
                $('#confirm-edit').modal("hide");
            } else {
                $('.top-right').notify({
                    message: {text: "修改失败，原因：" + result.message},
                    type: custom[1]
                }).show();
            }
        }, 'json');
    });

    $('#confirm-delete').on('show.bs.modal', function (e) {
        console.log("jinlaile");
        var cid = $(e.relatedTarget).data('id');
        var userid = {{.user.ID}}+"";
        var delethis = $(this).find('.deleteclass');
        var checkthis = $(this).find('.checkuser');
        $(this).find('.checkuser').click(function () {
            var password = $('input[name="password"]').val();
            password = $.trim(password);

            if (password.length == 0) {
                $('.top-right').notify({
                    message: "密码不能为空",
                    type: custom[1]
                }).show();
                return
            }

            $.post("/admin/checkuser", {userid: userid, password: password}, function (result) {

                if (result.succeed) {

                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                    checkthis.unbind("click");
                    issave = true;
                    delethis.removeClass("disabled");
                } else {
                    $('.top-right').notify({
                        message: {text: result.message},
                        type: custom[1]
                    }).show();
                }
            }, 'json');

        });


        $(this).find('.deleteclass').click(function () {
            if (issave) {
                $.post("/admin/class/delete", {classid: cid}, function (result) {
                    console.log(result);
                    if (result.succeed) {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                        $('input[name="password"]').val("");
                        $("#confirm-delete").modal("hide");
                        delethis.addClass("disabled");
                        delethis.unbind("click");
                        checkthis.unbind("click");
                        window.location.href = window.location.href;
                        issave = false;
                    } else {
                        $('.top-right').notify({
                            message: {text: result.message},
                            type: custom[1]
                        }).show();
                        delethis.unbind("click");
                        checkthis.unbind("click");
                    }
                }, 'json');
            } else {
                $('.top-right').notify({
                    message: "未验证密码",
                    type: custom[1]
                }).show();
            }
        });

        $(this).find('.cancel').click(function () {
            delethis.unbind("click");
            checkthis.unbind("click");
        });


    });

</script>
</body>
</html>
{{end}}